<template>
  <div>
  <el-row :gutter="20">
    <el-col :span="6" v-for="boxContent in contentList" :key="boxContent?.title">
      <package-card :boxContent="boxContent"></package-card>
    </el-col>
  </el-row>
  <custom-table
      :table-data="tableData"
      :columns="columns"
      :show-pagination="true"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
    >
      <!-- 自定义插槽 -->
      <template #action="{ row }">
        <el-button type="text" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" @click="handleDelete(row)">删除</el-button>
      </template>
    </custom-table>
  </div>
</template>

<script lang="ts" setup>
// import { defineComponent } from 'vue';
import packageCard from "./packageCard.vue";
import customTable from '@/components/Table/src/packageTable.vue';
defineOptions({ name: 'myTest' });
const contentList = [
  {
    type: 'blue',
    title: '本月新增设备',
    number: '6000',
    icon: 'Setting',
    bgColor: 'lightgreen'
  },
  {
    type: 'blue',
    title: '下月新增设备',
    number: '8000',
    icon: 'Setting',
    bgColor: 'lightgreen'
  },
  {
    type: 'blue',
    title: '本月新增设备',
    number: '6000',
    icon: 'Setting',
    bgColor: 'lightgreen'
  },
  {
    type: 'blue',
    title: '下月新增设备',
    number: '8000',
    icon: 'Setting',
    bgColor: 'lightgreen'
  }
];


// const tableData = ref([]); // 表格数据
// const tableColumns = ref([]); // 表格列配置
// const currentPage = ref(1); // 当前页码
// const pageSize = ref(10); // 每页显示数量
// const total = ref(0); // 数据总数

// const fetchData = () => {
//   // 从后端获取表格数据，并更新 tableData 和 total
// };

// fetchData();

// export { tableData, tableColumns, currentPage, pageSize, total };

// table数据相关
const tableData = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
];
const columns = [
  { prop: 'id', label: 'ID' },
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { label: '操作', slot: 'action' },
];
const total = 100;
const currentPage= 1;
const pageSize=10;
// 编辑
const handleEdit =(row:any) =>{
  console.log('Edit:', row);
}
// 删除
const handleDelete =(row:any) =>{
  console.log('Delete:', row);
}
</script>
<style lang="scss" scoped></style>



